<template>
	<div>
		<el-tabs type="card">
			<el-tab-pane>
				<span slot="label"><i class="el-icon-date"></i> 作品信息</span>
				<el-form ref="form" :model="book" label-width="80px">
					<div class="layui-upload" style="position: absolute;margin-left: 550px;">
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="bookCover">
							<p id="demoText"></p>
						</div>
						<button type="button" class="layui-btn" id="upload">上传封面</button>
					</div>
					<el-form-item label="作品ID" label-width="80px">
						<el-col class="line" :span="2">-</el-col>
					</el-form-item>
					<el-form-item label="作品名称">
						<el-col :span="5">
							<el-input v-model="book.bookName" maxlength="15" placeholder="1-15字"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="作品分类">
						<el-col :span="5">
							<el-select v-model="book.categoryId" placeholder="请选择作品分类">
								<el-option label="古代" value="1"></el-option>
								<el-option label="现代" value="2"></el-option>
								<el-option label="幻想" value="3"></el-option>
								<el-option label="架空" value="4"></el-option>
							</el-select>
						</el-col>
					</el-form-item>
					<el-form-item label="作品进度">
						<el-col :span="5">
							<el-select v-model="book.status" placeholder="请选择作品进度">
								<el-option label="连载" value="1"></el-option>
								<el-option label="完结" value="2"></el-option>
							</el-select>
						</el-col>
					</el-form-item>
					<el-form-item label="作品简介">
						<el-col :span="20">
							<el-input type="textarea" v-model="book.description" rows="6" maxlength="500" minlength="20" placeholder="20-500字,作品详情页中展示"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-button class="button" @click="createBook()">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="更新章节" v-if="show">
				<el-form ref="form" :model="chapterForm" label-width="80px">
					<el-form-item label="章节名称">
						<el-col :span="5">
							<el-input v-model="chapterForm.chapterName"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="章节内容">
						<div id="div1">
						</div>
					</el-form-item>
					<el-form-item>
						<el-button class="button" @click="updateChapter">立即发布</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="作品数据" v-if="show">
				<el-collapse v-model="activeNames" @change="handleChange">
					<el-collapse-item title="书籍点击量" name="1">
						<div>{{bookDatas.clickNumber }}</div>
					</el-collapse-item>
					<el-collapse-item title="书籍收藏量" name="2">
						<div>{{bookDatas.collection}}</div>
					</el-collapse-item>
					<el-collapse-item title="总订阅量" name="3">
						<div>{{bookDatas.subscribe}}</div>
					</el-collapse-item>
				</el-collapse>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import E from 'wangeditor'
	import $ from "jquery";
	export default {
		data() {
			return {
				// 富文本编辑器
				editor: null,
				chapterForm: {
					content: "",
					chapterName: "",
					author_id: sessionStorage.getItem("authorId"),
					bookId: '',
					wordNumber: 0,
				},
				fileList: [],
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				activeNames: ['1'],
				show: '',
				bookDatas: {},
				book: {
					bookId: '',
					bookName: '',
					image: '',
					description: '',
					authorId: sessionStorage.getItem("authorId"),
					categoryId: '',
					status: '',
					count: 0,
					count_day: 0,
					create_time: '',
					update_time: '',
					flag: 1
				},
				dialogVisible: false,
				disabled: false,
				hideUpload: false
			}
		},
		mounted() {
			this.editor = new E("#div1");
			this.editor.create();
			var _this = this;
			layui.use('upload', function() {
				let $ = layui.jquery;
				let upload = layui.upload;

				//普通图片上传
				let uploadInst = upload.render({
					elem: '#upload', // button id
					url: 'http://localhost/book/picture/add', //改成您自己的上传接口
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#bookCover').attr('src', result); //图片链接（base64）
						});
					},
					done: function(res) {
						//如果上传失败
						if (res.code != 200) {
							return layer.msg('上传失败');
						}
						//上传成功

						_this.book.image = res.data.msg;

					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				});
			});
			const editor = new E('#div1')
			// 或者 const editor = new E( document.getElementById('div1') )
			editor.create()
			sessionStorage.getItem("authorId")
		},
		methods: {

			handleChange(val) {
				console.log(val);
			},
			createBook: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/book",
					data: _this.book,
					type: "post",
					success(data) {
						console.log(data);
					}
				});
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			updateChapter() {
				// 上传章节内容
				this.chapterForm.content = this.editor.txt.html();
				let _this = this;
				console.log(JSON.stringify(this.chapterForm))
				$.ajax({
					url: "http://localhost/chapter",
					data: this.chapterForm,
					type: "post",
					success: function(res) {
						if (res.code != 200) {
							_this.$notify.error(res.message);
							return;
						}
						// 更新成功
						_this.$notify.success("更新成功");
					}
				});
			},
			bookDate: function() {
				let _this = this;
				$.ajax({
					url: "http://localhost/bookData/" +(Number) (_this.show),
					type: "get",
					success: function(res) {
						if (res.code != 200) {
							_this.$notify.error(res.message);
							return;
						}
						_this.bookDatas = res.data
					}
				});
			}
		},
		created() {
			var bookId = decodeURIComponent((new RegExp('[?|&]' + 'bookId' + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ""])[1].replace(/\+/g, '%20')) || null
			this.show = bookId;
			this.chapterForm.bookId = bookId;
			if(bookId){
				this.bookDate();
			}
		},
	}
</script>

<style>
	.button {
		background-color: #52C29A;
		color: white;
	}

	#upload {
		z-index: 9999;
		background-color: #52C29A;
	}

	#bookCover {
		width: 150px;
		height: 150px;
	}
</style>
